<template>
  <div id="album">
    <transition name="fade">
      <loading v-show="isLoading"></loading>
    </transition>
    <div id="info">
      <div class="img">
        <img v-lazy="cover" alt="" />
        <i class="albumIcno"></i>
      </div>
      <div id="name">
        <div class="name">
          <span>{{ name }}</span>
          <span v-show="alias != null" style="color: #999">
            ({{ alias }})
          </span>
        </div>
        <div class="art">
          <div class="artItem" v-for="(item, index) in artistList" :key="index">
            <img v-lazy="item.img1v1Url" alt="" />
            <span @click="gotoSinger(item)">{{ item.name }}</span>
          </div>
        </div>
        <div class="tags">
          <div class="time">
            <span>发行时间：</span>
            <span>{{ time }}</span>
          </div>
          <div class="company">
            <span>发行公司：</span>
            <span>{{ company }}</span>
          </div>
          <div class="type">
            <span>类型：</span>
            <span>{{ type }}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="song">
      <div class="left">
        <table>
          <tr style="background-color: rgb(251, 251, 253)">
            <th></th>
            <th>歌曲</th>
            <th>歌手</th>
          </tr>
          <tr
            v-for="(item, index) in albumSongList"
            :key="index"
            @mouseover="trShow = index"
            @click="playById(item, index)"
          >
            <td :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }">
              <span class="no" v-show="index < 9">0{{ index + 1 }}</span>
              <span class="no" v-show="index >= 9">{{ index + 1 }}</span>
            </td>
            <td :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }">
              <span class="name">{{ item.name }}</span>
              <span v-show="item.alia.length > 0" style="color: #999"
                >({{ item.alia[0] }})</span
              >
            </td>
            <td :style="{ backgroundColor: trShow === index ? '#f5f5f5' : '' }">
              <span v-for="(arItem, arIndex) in item.ar" :key="arIndex">
                <span class="arName">{{ arItem.name }}</span>
                <span
                  style="color: #cdcdcd"
                  v-show="arIndex < item.ar.length - 1"
                  >/
                </span>
              </span>
            </td>
          </tr>
        </table>
      </div>
      <div class="right">
        <div class="des">
          <h3>简介</h3>
          <span>{{ description }}</span>
        </div>
        <div class="other"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Loading from "../components/loading.vue";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      isLoading: true,
      // 专辑id
      id: null,
      //   专辑歌曲
      albumSongList: [],
      // 专辑名称
      name: null,
      // 专辑别名
      alias: [],
      // 专辑发行时间
      time: null,
      // 专辑发布公司
      company: null,
      // 简介
      description: null,
      // 专辑封面
      cover: null,
      // 专辑类型
      type: null,
      // 专辑歌手
      artistList: [],
      //   哪一行变色
      trShow: false,
    };
  },
  methods: {
    // 新歌播放
    playById(item) {
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          name: item.name,
          picUrl: item.al.picUrl,
          alias: item.alia[0],
          arts: item.ar,
        };
        this.$bus.$emit("get-src", data);
      });
    },
    // 去歌手详情页
    gotoSinger(item) {
      this.$router.replace({
        name: "singerDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    // 获取专辑信息
    this.$axios({
      url: "/album",
      params: {
        id: this.id,
      },
    }).then((res) => {
      this.isLoading = false;
      this.albumSongList = res.data.songs;
      this.name = res.data.album.name;
      this.cover = res.data.album.picUrl;
      this.description = res.data.album.description;
      this.company = res.data.album.company;
      this.type = res.data.album.subType;
      this.artistList = res.data.album.artists;
      this.alias = res.data.album.alias[0];
      let time = new Date(res.data.album.publishTime);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (date >= 0 && date <= 9) {
        date = "0" + date;
      }
      this.time = year + " - " + month + " - " + date;
    });
  },
};
</script>

<style scoped>
@import url("../css/albumDetail");
</style>